<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Connected Carousels - jCarousel Examples</title>

        <!-- Shared assets -->
        <link rel="stylesheet" type="text/css" href="../_shared/css/style.css">

        <!-- Example assets -->
        <link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css">

        <script type="text/javascript" src="../../../jquery.js"></script>
        <script type="text/javascript" src="../../jquery.jcarousel.min.js"></script>

        <script type="text/javascript" src="jcarousel.connected-carousels.js"></script>

    </head>
    <body>

        <div class="wrapper">
            <h1>Connected Carousels</h1>
            
            <p>This example shows how to connect two carousels together so that one carousels acts as a navigation for the other.</p>
            
            <div class="connected-carousels">
                <div class="stage">
                    <div class="carousel carousel-stage">
                        <ul>
                            <li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                            <li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                            <li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                            <li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                            <li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                            <li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                        </ul>
                    </div>
                    <p class="photo-credits">
                        Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
                    </p>
                    <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
                    <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                </div>

                <div class="navigation">
                    <a href="#" class="prev prev-navigation">&lsaquo;</a>
                    <a href="#" class="next next-navigation">&rsaquo;</a>
                    <div class="carousel carousel-navigation">
                        <ul>
                            <li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
                            <li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
                            <li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
                            <li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
                            <li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
                            <li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>
